<template>
    <div class="container">
        <mt-header fixed title="工作流程" id="header1"></mt-header>
        <!-- navbar -->
        <mt-navbar class="tab" v-model="checked">
            <mt-tab-item id="workList">任务清单</mt-tab-item>
            <mt-tab-item id="workPlan">工作计划</mt-tab-item>
            <mt-tab-item id="workDone">任务实施</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="checked" id="container_work">
             <!-- 任务清单 内容 -->
        <mt-tab-container-item id="workList">
            <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="任务名称">
                <el-input v-model="form.name" placeholder="任务名称"></el-input>
            </el-form-item>
            <el-form-item label="活动类型">
                <el-select v-model="query1">
                <el-option label="全部" value="all"></el-option>
                <el-option label="巡检" value="xunjian"></el-option>
                <el-option label="维修" value="weixiu"></el-option>
                <el-option label="维护" value="weihu"></el-option>
                <el-option label="应急" value="yingji"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="海事局">
                <el-select v-model="query2">
                <el-option label="全部" value="all"></el-option>
                <el-option label="湛江海事局" value="zhanjiang"></el-option>
                <el-option label="广州海事局" value="guangzhou"></el-option>
                <el-option label="汕头海事局" value="shantou"></el-option>
                <el-option label="茂名海事局" value="maoming"></el-option>
                <el-option label="惠州海事局" value="huizhou"></el-option>
                <el-option label="珠海海事局" value="zhuhai"></el-option>
                <el-option label="东莞海事局" value="dongguan"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="雷达站">
                <el-select v-model="query3">
                <el-option label="全部" value="all"></el-option>
                <el-option label="广州VTS中心" value="GZ"></el-option>
                <el-option label="汕头VTS中心" value="ST"></el-option>
                <el-option label="珠海VTS中心" value="ZH"></el-option>
                <el-option label="东莞VTS中心" value="DG"></el-option>
                <el-option label="湛江VTS中心" value="ZJ"></el-option>
                <el-option label="徐闻VTS分中心" value="XW"></el-option>
                <el-option label="惠州VTS中心" value="HZ"></el-option>
                <el-option label="莲花山" value="LH"></el-option>
                <el-option label="大角山" value="DJ"></el-option>
                <el-option label="淇奥" value="QA"></el-option>
                <el-option label="桂山" value="GS"></el-option>
                <el-option label="坭洲头" value="NZ"></el-option>
                <el-option label="石牌山" value="SP"></el-option>
                <el-option label="广奥大山" value="GA"></el-option>
                <el-option label="大放鸡岛" value="DF"></el-option>
                <el-option label="水东" value="SD"></el-option>
                <el-option label="喜州岛" value="XZ"></el-option>
                <el-option label="玻山岛" value="BS"></el-option>
                <el-option label="高栏" value="GL"></el-option>
                <el-option label="荷包" value="HB"></el-option>
                <el-option label="外伶仃" value="LD"></el-option>
                <el-option label="担杆" value="DG"></el-option>
                <el-option label="横琴" value="HQ"></el-option>
                <el-option label="海湾大桥" value="HW"></el-option>
                <el-option label="硇洲岛" value="SZ"></el-option>
                <el-option label="山狗吼" value="SG"></el-option>
                <el-option label="三唐角" value="ST"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item label="任务状态">
                <el-select v-model="query4">
                <el-option label="全部" value="all"></el-option>
                <el-option label="未实施" value="WSS"></el-option>
                <el-option label="计划中" value="JHZ"></el-option>
                <el-option label="实施中" value="SSZ"></el-option>
                <el-option label="已完成" value="YWC"></el-option>
                <el-option label="任务已撤销" value="YCX"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item label="审核状态">
                <el-select v-model="query5">
                <el-option label="全部" value="all"></el-option>
                <el-option label="海事局已审核" value="YSH"></el-option>
                <el-option label="项目经理已确认" value="YQR"></el-option>
                <el-option label="海事局审核未通过" value="WTG"></el-option>
                <el-option label="待审核" value="DSH"></el-option>
                <el-option label="未提交" value="WTG"></el-option>
                <el-option label="项目经理已审批" value="YSP"></el-option>
                <el-option label="项目经理审核未通过" value="WTG"></el-option>
                <el-option label="项目经理代审核" value="DSH"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="实施时间">
                <el-col>
                <el-date-picker type="date" placeholder="yy-mm-dd" v-model="form.date1" style="width: 85%;"></el-date-picker>
                </el-col>
                <!-- <el-col class="line" :span="1">-</el-col> -->
                <el-col>
                <el-date-picker type="date" placeholder="yy-mm-dd" v-model="form.date2" style="width: 85%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item id="el_form">
                <el-button type="primary" @click="addInfo">新增</el-button>
                <el-button type="primary">查询</el-button>
            </el-form-item>
            </el-form>
            <!-- 任务清单列表 -->
            <div class="task">
            <p>任务清单列表</p>
            <el-collapse>
                <el-collapse-item title="汕头广澳大山UPS应急维修" name="1">
                <div>任务系列号:20180328001</div>
                <div>任务类型:维修</div>
                <div>实施对象:山特UPS</div>
                <div>海事局:汕头海事局</div>
                <div>雷达站:广澳大山</div>
                <div>任务内容:检修山特UPS</div>
                <div>任务来源:山特UPS</div>
                <div>实施对象:工程师巡检</div>
                <div>创建人:马鹏鹏</div>
                <div>任务状态:已完成</div>
                <div>审核状态:项目经理已审批</div>
                <div>工作量(天):3</div>
                <div>计划实施时间:2018-03-28</div>
                </el-collapse-item>
            </el-collapse>
            </div>
        </mt-tab-container-item>
        <!-- 工作计划 内容 -->
        <mt-tab-container-item id="workPlan">
            <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="任务名称">
                <el-input v-model="form.name" placeholder="任务名称"></el-input>
            </el-form-item>
            <el-form-item label="活动类型">
                <el-select v-model="query1">
                <el-option label="全部" value="all"></el-option>
                <el-option label="巡检" value="xunjian"></el-option>
                <el-option label="维修" value="weixiu"></el-option>
                <el-option label="维护" value="weihu"></el-option>
                <el-option label="应急" value="yingji"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="海事局">
                <el-select v-model="query2">
                <el-option label="全部" value="all"></el-option>
                <el-option label="湛江海事局" value="zhanjiang"></el-option>
                <el-option label="广州海事局" value="guangzhou"></el-option>
                <el-option label="汕头海事局" value="shantou"></el-option>
                <el-option label="茂名海事局" value="maoming"></el-option>
                <el-option label="惠州海事局" value="huizhou"></el-option>
                <el-option label="珠海海事局" value="zhuhai"></el-option>
                <el-option label="东莞海事局" value="dongguan"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="雷达站">
                <el-select v-model="query3">
                <el-option label="全部" value="all"></el-option>
                <el-option label="广州VTS中心" value="GZ"></el-option>
                <el-option label="汕头VTS中心" value="ST"></el-option>
                <el-option label="珠海VTS中心" value="ZH"></el-option>
                <el-option label="东莞VTS中心" value="DG"></el-option>
                <el-option label="湛江VTS中心" value="ZJ"></el-option>
                <el-option label="徐闻VTS分中心" value="XW"></el-option>
                <el-option label="惠州VTS中心" value="HZ"></el-option>
                <el-option label="莲花山" value="LH"></el-option>
                <el-option label="大角山" value="DJ"></el-option>
                <el-option label="淇奥" value="QA"></el-option>
                <el-option label="桂山" value="GS"></el-option>
                <el-option label="坭洲头" value="NZ"></el-option>
                <el-option label="石牌山" value="SP"></el-option>
                <el-option label="广奥大山" value="GA"></el-option>
                <el-option label="大放鸡岛" value="DF"></el-option>
                <el-option label="水东" value="SD"></el-option>
                <el-option label="喜州岛" value="XZ"></el-option>
                <el-option label="玻山岛" value="BS"></el-option>
                <el-option label="高栏" value="GL"></el-option>
                <el-option label="荷包" value="HB"></el-option>
                <el-option label="外伶仃" value="LD"></el-option>
                <el-option label="担杆" value="DG"></el-option>
                <el-option label="横琴" value="HQ"></el-option>
                <el-option label="海湾大桥" value="HW"></el-option>
                <el-option label="硇洲岛" value="SZ"></el-option>
                <el-option label="山狗吼" value="SG"></el-option>
                <el-option label="三唐角" value="ST"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item label="任务状态">
                <el-select v-model="query4">
                <el-option label="全部" value="all"></el-option>
                <el-option label="未实施" value="WSS"></el-option>
                <el-option label="计划中" value="JHZ"></el-option>
                <el-option label="实施中" value="SSZ"></el-option>
                <el-option label="已完成" value="YWC"></el-option>
                <el-option label="任务已撤销" value="YCX"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item label="审核状态">
                <el-select v-model="query5">
                <el-option label="全部" value="all"></el-option>
                <el-option label="海事局已审核" value="YSH"></el-option>
                <el-option label="项目经理已确认" value="YQR"></el-option>
                <el-option label="海事局审核未通过" value="WTG"></el-option>
                <el-option label="待审核" value="DSH"></el-option>
                <el-option label="未提交" value="WTG"></el-option>
                <el-option label="项目经理已审批" value="YSP"></el-option>
                <el-option label="项目经理审核未通过" value="WTG"></el-option>
                <el-option label="项目经理代审核" value="DSH"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="实施时间">
                <el-col>
                <el-date-picker type="date" placeholder="yy-mm-dd" v-model="form.date1" style="width: 80%;"></el-date-picker>
                </el-col>
                <el-col>
                <el-date-picker type="date" placeholder="yy-mm-dd" v-model="form.date2" style="width: 80%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item id="el_form">
                <el-button type="primary">新增</el-button>
                <el-button type="primary">查询</el-button>
            </el-form-item>
            </el-form>
            <div class="task">
            <p>工作计划列表</p>
            <el-collapse>
                <el-collapse-item title="汕头广澳大山UPS应急维修---2018-07-25" name="1">
                <div>任务系列号：20180328001</div>
                <div>任务名称：桂山雷达站巡检</div>
                <div>实施对象：桂山雷达站</div>
                <div>海事局：广州海事局</div>
                <div>雷达站：桂山</div>
                <div>任务内容：雷达站巡检</div>
                <div>计划实施时间：2018-07-25</div>
                <div>任务状态：<i class="iconfont icon-completed"></i>实施中</div>
                <div>审核人：陈楚楚</div>
                <div>执行人：王礼康,伍瑞秋</div>
                <div>抄送人：靳玉杰</div>
                </el-collapse-item>
            </el-collapse>
            </div>
        </mt-tab-container-item>
        <!-- 任务实施 内容 -->
        <mt-tab-container-item id="workDone">
                <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="设备名称">
                <el-input v-model="form.name" placeholder="设备名称"></el-input>
            </el-form-item>
            <el-form-item label="活动类型">
                <el-select v-model="query1">
                <el-option label="全部" value="all"></el-option>
                <el-option label="巡检" value="xunjian"></el-option>
                <el-option label="维修" value="weixiu"></el-option>
                <el-option label="维护" value="weihu"></el-option>
                <el-option label="应急" value="yingji"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="海事局">
                <el-select v-model="query2">
                <el-option label="全部" value="all"></el-option>
                <el-option label="湛江海事局" value="zhanjiang"></el-option>
                <el-option label="广州海事局" value="guangzhou"></el-option>
                <el-option label="汕头海事局" value="shantou"></el-option>
                <el-option label="茂名海事局" value="maoming"></el-option>
                <el-option label="惠州海事局" value="huizhou"></el-option>
                <el-option label="珠海海事局" value="zhuhai"></el-option>
                <el-option label="东莞海事局" value="dongguan"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="雷达站">
                <el-select v-model="query3">
                <el-option label="全部" value="all"></el-option>
                <el-option label="广州VTS中心" value="GZ"></el-option>
                <el-option label="汕头VTS中心" value="ST"></el-option>
                <el-option label="珠海VTS中心" value="ZH"></el-option>
                <el-option label="东莞VTS中心" value="DG"></el-option>
                <el-option label="湛江VTS中心" value="ZJ"></el-option>
                <el-option label="徐闻VTS分中心" value="XW"></el-option>
                <el-option label="惠州VTS中心" value="HZ"></el-option>
                <el-option label="莲花山" value="LH"></el-option>
                <el-option label="大角山" value="DJ"></el-option>
                <el-option label="淇奥" value="QA"></el-option>
                <el-option label="桂山" value="GS"></el-option>
                <el-option label="坭洲头" value="NZ"></el-option>
                <el-option label="石牌山" value="SP"></el-option>
                <el-option label="广奥大山" value="GA"></el-option>
                <el-option label="大放鸡岛" value="DF"></el-option>
                <el-option label="水东" value="SD"></el-option>
                <el-option label="喜州岛" value="XZ"></el-option>
                <el-option label="玻山岛" value="BS"></el-option>
                <el-option label="高栏" value="GL"></el-option>
                <el-option label="荷包" value="HB"></el-option>
                <el-option label="外伶仃" value="LD"></el-option>
                <el-option label="担杆" value="DG"></el-option>
                <el-option label="横琴" value="HQ"></el-option>
                <el-option label="海湾大桥" value="HW"></el-option>
                <el-option label="硇洲岛" value="SZ"></el-option>
                <el-option label="山狗吼" value="SG"></el-option>
                <el-option label="三唐角" value="ST"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item label="任务状态">
                <el-select v-model="query4">
                <el-option label="全部" value="all"></el-option>
                <el-option label="未实施" value="WSS"></el-option>
                <el-option label="计划中" value="JHZ"></el-option>
                <el-option label="实施中" value="SSZ"></el-option>
                <el-option label="已完成" value="YWC"></el-option>
                <el-option label="任务已撤销" value="YCX"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item label="审核状态">
                <el-select v-model="query5">
                <el-option label="全部" value="all"></el-option>
                <el-option label="海事局已审核" value="YSH"></el-option>
                <el-option label="项目经理已确认" value="YQR"></el-option>
                <el-option label="海事局审核未通过" value="WTG"></el-option>
                <el-option label="待审核" value="DSH"></el-option>
                <el-option label="未提交" value="WTG"></el-option>
                <el-option label="项目经理已审批" value="YSP"></el-option>
                <el-option label="项目经理审核未通过" value="WTG"></el-option>
                <el-option label="项目经理代审核" value="DSH"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="维护时间">
                <el-col>
                <el-date-picker type="date" placeholder="yy-mm-dd" v-model="form.date1" style="width: 80%;"></el-date-picker>
                </el-col>
                <el-col>
                <el-date-picker type="date" placeholder="yy-mm-dd" v-model="form.date2" style="width: 80%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item id="el_form">
                <el-button type="primary">新增</el-button>
                <el-button type="primary">查询</el-button>
            </el-form-item>
            </el-form>
            <div class="task">
            <p>任务实施列表</p>
            <el-collapse>
                <el-collapse-item title="惠州VTS中心" name="1">
                <div>海事局 :惠州海事局</div>
                <div>任务状态:实施中</div>
                <div>审核状态:待审核</div>
                <div>任务系列号:20180622005</div>
                <div>工作报告:巡检报告</div>
                </el-collapse-item>
            </el-collapse>
            </div>
        </mt-tab-container-item>
        </mt-tab-container>

    </div>
</template>
<script>
export default {
    data(){
    return{
      checked: 'workList',
      activeName: 'second',
      isActive:true,
    //默认选中第一项
      selected:"index",
      tableData:[
          {
            name:"广东省",
            state:"正常",
            report:"-"
          }
      ],
    tableList:[
        {
          name:"湛江海事局",
          state:"正常",
          report:"暂无"
        },
       {
          name:"茂名海事局",
          state:"正常",
          report:"暂无"
        },
        {
          name:"惠州海事局",
          state:"正常",
          report:"暂无"
        },
        {
          name:"珠海海事局",
          state:"正常",
          report:"暂无"
        },
        {
          name:"东莞海事局",
          state:"正常",
          report:"暂无"
        }
    ],
    zhanjiangList:[
        {
          name:"海湾大桥雷达站",
          state:"正常",
          report:"巡检报告"
        },
        {
          name:"洲岛雷达站",
          state:"正常",
          report:"巡检报告"
        },
        {
          name:"山狗吼雷达站",
          state:"正常",
          report:"巡检报告"
        },
        {
          name:"三塘角雷达站",
          state:"正常",
          report:"巡检报告"
        }
    ],
    // 获取row的key值
    getRowKeys(row) {
      return row.id;
    },
    // 要展开的行，数值的元素是row的key值
    expands: [],
    form: {
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: ''
    },
    query1:'all',
    query2:'all',
    query3:'all',
    query4:'all',
    query5:'all'

    }
  },
  mounted() {
    // 在这里你想初始化的时候展开哪一行都可以了
    this.expands.push(this.tableList[1].id);
  },
  methods:{
    clickTxt(){
      this.isActive = !this.isActive;
      var clickTxt = document.getElementsByClassName("clickTxt")[0];
      if(this.isActive){
         clickTxt.innerHTML="点开全文"
      }else{
         clickTxt.innerHTML="收起"
      }
    },
    handleToggleDrawer() {
      this.$refs.drawerLayout.toggle();
    },
    addInfo(){
      this.$router.push('/addinfo');
    }
  }
}
</script>
<style scoped lang="scss">
    .container{
        width:100vw;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
  .task{ 
    width:90vw;
    margin:auto;
     p{
      margin-top:5vw;
      line-height:10vw;
      color:#777676;
      font-size:14px;
    }
  }
  // tab切换
  .tab{
    margin-top:2.5rem;
  }
 
</style>
